<template>
	<div>
		<!-- 年度开工率 -->
		<Echart :options="options" id="bottomLeftChart" height="460px" width="100%"></Echart>
	</div>
</template>

<script>
	import Echart from '@/common/echart'
	export default {
		data() {
			return {
				options: {},
			};
		},
		components: {
			Echart,
		},
		props: {
			cdata: {
				type: Object,
				default: () => ({})
			},
		},
		watch: {
			cdata: {
				handler(newData) {
					this.options = {
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								lineStyle: {
									color: '#dddc6b'
								}
							}
						},
						legend: {
							top: '0%',
							data: ['温度', '风向'],
							textStyle: {
								color: 'rgba(255,255,255,.5)',
								fontSize: '12',
							}
						},
						grid: {
							left: '10',
							top: '30',
							right: '10',
							bottom: '10',
							containLabel: true
						},

						xAxis: [{
							type: 'category',
							boundaryGap: false,
							axisLabel: {
								textStyle: {
									color: "rgba(255,255,255,.6)",
									fontSize: 12,
								},
							},
							axisLine: {
								lineStyle: {
									color: 'rgba(255,255,255,.2)'
								}

							},

							data: newData.time

						}, {

							axisPointer: {
								show: false
							},
							axisLine: {
								show: false
							},
							position: 'bottom',
							offset: 20,



						}],

						yAxis: [{
							type: 'value',
							axisTick: {
								show: false
							},
							axisLine: {
								lineStyle: {
									color: 'rgba(255,255,255,.1)'
								}
							},
							axisLabel: {
								textStyle: {
									color: "rgba(255,255,255,.6)",
									fontSize: 12,
								},
							},

							splitLine: {
								lineStyle: {
									color: 'rgba(255,255,255,.1)'
								}
							}
						}],
						series: [{
								name: '温度',
								type: 'line',
								smooth: true,
								symbol: 'circle',
								symbolSize: 5,
								showSymbol: false,
								lineStyle: {

									normal: {
										color: '#0184d5',
										width: 2
									}
								},
								areaStyle: {
									normal: {
										color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
											offset: 0,
											color: 'rgba(1, 132, 213, 0.4)'
										}, {
											offset: 0.8,
											color: 'rgba(1, 132, 213, 0.1)'
										}], false),
										shadowColor: 'rgba(0, 0, 0, 0.1)',
									}
								},
								itemStyle: {
									normal: {
										color: '#0184d5',
										borderColor: 'rgba(221, 220, 107, .1)',
										borderWidth: 12
									}
								},
								data:newData.lineoData
							},
							{
								name: '风向',
								type: 'line',
								smooth: true,
								symbol: 'circle',
								symbolSize: 5,
								showSymbol: false,
								lineStyle: {

									normal: {
										color: '#00d887',
										width: 2
									}
								},
								areaStyle: {
									normal: {
										color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
											offset: 0,
											color: 'rgba(0, 216, 135, 0.4)'
										}, {
											offset: 0.8,
											color: 'rgba(0, 216, 135, 0.1)'
										}], false),
										shadowColor: 'rgba(0, 0, 0, 0.1)',
									}
								},
								itemStyle: {
									normal: {
										color: '#00d887',
										borderColor: 'rgba(221, 220, 107, .1)',
										borderWidth: 12
									}
								},
								data: newData.linetData

							},

						]

					};
				},
				immediate: true,
				deep: true
			},
		},
	}
</script>
